<template>
  <div class='container'>
    <el-card>
      <!-- 从学科管理页面进入时有面包屑导航 -->
      <div slot="header" v-if="this.$route.query.name">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item> {{$route.query.name}} </el-breadcrumb-item>
          <el-breadcrumb-item>标签管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 数据筛选表单 -->
      <el-form :inline="true" :model="sxSelect" class="demo-form-inline">
        <el-form-item label="标签名称">
          <el-input v-model="sxSelect.tagName"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="sxSelect.state" placeholder="请选择">
            <!-- value代表sxSelect.state的值 label代表对应文字 -->
            <el-option v-for="item in states" :key="item.value"
             :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" native-type="reset" @click="onClear">清除</el-button>
          <el-button  size="small" type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item style="float:right;">
          <!-- 从学科管理页面进入时有返回学科链接 -->
          <el-button icon="el-icon-back" type="text"
            v-if="this.$route.query.name"
            @click="$router.back()"
            style="margin-right:5px;">返回学科</el-button>
          <el-button @click="openDialog"
           type="success" icon="el-icon-edit" size="small">新增标签</el-button>
        </el-form-item>
      </el-form>
      <!-- 提示total信息 -->
       <el-alert
        type="info"
        show-icon
        :closable="false">
        数据一共{{total}}条
      </el-alert>
      <!-- 数据列表 -->
      <el-table :data="tableData">
        <el-table-column prop="id" label="序号" width="80"></el-table-column>
        <el-table-column prop="subjectName" label="所属学科" width="180"></el-table-column>
        <el-table-column prop="tagName" label="标签名称" width="180"></el-table-column>
        <el-table-column prop="username" label="创建者" width="180"></el-table-column>
        <el-table-column  label="创建日期" width="180">
          <template slot-scope="scope">
            {{scope.row.addDate.substr(0,19).replace('T',' ')}}
          </template>
        </el-table-column>
        <el-table-column label="状态" width="130">
          <template slot-scope="scope">
            {{formatStatus(scope.row.state)}}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <!--
            状态为已启用1--操作栏是禁用按钮,修改和删除按钮不可用
            状态为已禁用0--操作栏是启用按钮,修改和删除按钮可用
           -->
           <template slot-scope="scope">
            <el-button @click="toggleState(scope.row)"
             v-if="!scope.row.state"
             type="text" size="small">启用</el-button>
            <el-button @click="toggleState(scope.row)"
             v-if="scope.row.state"
             type="text" size="small">禁用</el-button>
            <el-button @click="openDialog(scope.row)"
             type="text" size="small" :disabled="scope.row.state===1"
             >修改</el-button>
            <el-button @click="delTag(scope.row.id)"
             type="text" size="small" :disabled="scope.row.state===1"
             >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div id="page">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="sxSelect.page"
          :page-sizes="[3, 5, 8, 10]"
          :page-size="sxSelect.pagesize"
          layout="prev, pager, next, sizes, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
    <!-- 添加/修改组件 -->
    <addtag
    ref="tagadd"
    @render="getList"
    >
    </addtag>
  </div>
</template>

<script>
// 引入接口
import { list, changeState, remove } from '@/api/hmmm/tags'
// 引入tags-add
import addtag from '@/module-hmmm/components/tags-add.vue'
export default {
  components: { addtag },
  data () {
    return {
      addArt: {},
      sxSelect: {
        state: null, // 状态选择
        tagName: '',
        page: 1,
        pagesize: 10,
        subjectID: null
      },
      tableData: [], // 存放后端的标签列表
      total: 0,
      states: [ // 状态筛选
        {
          value: 1,
          label: '已启用'
        },
        {
          value: 0,
          label: '已禁用'
        }
      ]
    }
  },
  watch: {
    '$route.query': function () {
      this.getList()
    }
  },
  methods: {
    // 封装接口调用
    loadTag () {
      const params = {
        ...this.sxSelect
      }
      list(params).then(res => {
        // console.log(res)
        this.tableData = res.data.items
        this.total = res.data.counts
      })
    },
    // 获取列表数据
    getList () {
      this.sxSelect.subjectID = this.$route.query.id
      this.loadTag()
    },
    // 按条件查询
    onSubmit () {
      this.loadTag()
    },
    onClear () {
      this.sxSelect = {}
      this.loadTag()
    },
    // 状态从数字变成文字
    formatStatus (status) {
      const statusobj = {
        1: '已开启',
        0: '已禁用'
      }
      return statusobj[status]
    },
    // 切换启用禁用状态
    toggleState (row) {
      const data = {
        id: row.id,
        state: row.state === 1 ? 0 : 1
      }
      changeState(data).then(res => {
        // console.log(row.state)
        row.state = row.state === 1 ? 0 : 1
        // console.log(row.state)
        this.$message.success('切换状态成功')
      })
    },
    // 删除
    delTag (id) {
      const data = { id }
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(remove(data))
        .then(res => {
          console.log(res)
          this.$message.success('删除成功')
          this.loadTag()
        })
    },
    // 打开新增/修改
    openDialog (row) {
      const params = {
        row
      }
      this.$refs.tagadd.open() // 打开对话框
      this.$refs.tagadd.revise(params)
    },
    // 分页的切换条数
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.sxSelect.page = 1 // 每次更换每页几条后显示第一页数据
      this.sxSelect.pagesize = val
      this.loadTag()
    },
    // 分页的换页
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.sxSelect.page = val
      this.loadTag()
    }
  },
  mounted () {
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
  #page {
    margin: 15px 0;
    float: right;
  }
</style>
